<template>
	<view class="">
		<view class="wrapper">
				<view class="headerbox">
					
					<view class="left"  v-if="userInfo==null || userInfo==''">
						<view class="">
							<image src="../../static/img/temporary/mine_logo.png" mode=""></image>
						</view>
						<view class="user">
							<button class='testbutton' open-type="getUserInfo" @getuserinfo="getuserinfo" withCredentials="true">点击授权</button>
						</view>
					</view>
					<view class="left"  v-else>
						<view class="">
							<image :src="userInfo.avatarUrl" mode=""></image>
						</view>
						<view class="user">
							<view class="name"><text>{{userInfo.nickName}}</text><image v-if="userInfo.gender==1" src="../../static/img/icon/sex.png" mode="" class="sex"></image><image  v-if="userInfo.gender==2" src="../../static/img/icon/sex.png" mode="" class="sex"></image></view>
							<!-- <view class="code">拾玖号：{{userinfo.code}}</view> -->
						</view>
					</view>
					<view class="vipcode">
						<view class="code">
							<image src="../../static/img/icon/vipcode.png" mode=""><view>会员码</view></image>
						</view>
					</view>
				</view>
				<view class="vipbox">
					<image src="../../static/img/common_icon/mine__vip.png" mode=""></image>
					<view class="viptitle">拾玖会员卡</view>
					<view class="dredge">
						<view class="text">立即开通</view>
					</view>
				</view>
				
			</view>
			<view class="listbox">
				<view class="list">
					<view class="left"><image src="../../static/img/icon/mine_icon_1.png" mode=""></image><view class="collect">我的收藏</view></view>
					<view class="right"><image src="../../static/img/icon/mine_icon_next.png" mode=""></image></view>
				</view>
				<view class="listborder"></view>
				<navigator url="/pages/mineOrder/order">
				<view class="list">
						<view class="left"><image src="../../static/img/icon/mine_icon_2.png" mode=""></image><view class="collect">我的预约</view></view>
						<view class="right"><image src="../../static/img/icon/mine_icon_next.png" mode=""></image></view>
				</view>
				</navigator>
				<view class="listborder"></view>
				<view class="list">
					<view class="left"><image src="../../static/img/icon/mine_icon_3.png" mode=""></image><view class="collect">我的评论</view></view>
					<view class="right"><image src="../../static/img/icon/mine_icon_next.png" mode=""></image></view>
				</view>
				<view class="listborder"></view>
				<view class="list">
					<view class="left"><image src="../../static/img/icon/mine_icon_4.png" mode=""></image><view class="collect">我的卡券</view></view>
					<view class="right"><image src="../../static/img/icon/mine_icon_next.png" mode=""></image></view>
				</view>
			</view>
			<view class="listbox listbox2">
				<view class="list">
					<view class="left"><image src="../../static/img/icon/mine_icon_5.png" mode=""></image><view class="collect">分享给好友</view></view>
					<view class="right"><image src="../../static/img/icon/mine_icon_next.png" mode=""></image></view>
				</view>
				<view class="listborder"></view>
				<view class="list">
					<button open-type="contact" bindcontact="handleContact" style="width:100%">
						<view class="left"><image src="../../static/img/icon/mine_icon_6.png" mode=""></image><view class="collect">联系客服</view></view>
					</button>
					<view class="right"><image src="../../static/img/icon/mine_icon_next.png" mode=""></image></view>
				</view>
				         
				<view class="listborder"></view>
				<navigator url="/pages/about/index">
				<view class="list">
					<view class="left"><image src="../../static/img/icon/mine_icon_7.png" mode=""></image><view class="collect">关于拾玖</view></view>
					<view class="right"><image src="../../static/img/icon/mine_icon_next.png" mode=""></image></view>
				</view>
				</navigator>
			</view>
	</view>
	</template>

<script>
	export default {
		data() {
			return {
				userInfo:uni.getStorageSync('userInfo')
				// userinfo:{
				// 	logo:'../../static/img/temporary/mine_logo.png',
				// 	name:'十九',
				// 	sex:'0',
				// 	code:'18800000000'
				// }
			}
		},
		onLoad() {
	
		},
		methods: {
			getuserinfo(){
				let that = this
			// uni.login({
			//   provider: 'weixin',
			//   success: function (loginRes) {
			//   console.log(loginRes);
			   uni.getUserInfo({
                       success: info => {
                             console.log('-------获取sessionKey、openid(unionid)-------')
                             console.log(info.userInfo);
							 uni.setStorageSync('userInfo',info.userInfo)
							 that.userInfo=info.userInfo
							 console.log(that.userInfo)
                       }
                });
			//   }
			// })
			}
		}
	}
</script>

<style scoped>
	
	.wrapper {
		padding: 20rpx 40rpx;
		background-color: #0d6866;
		height: 264rpx;
		border-radius: 0rpx 0rpx 120rpx 120rpx;
		position: relative;
		margin-bottom: 55rpx;
		z-index: 11;
		
	}
	.wrapper .headerbox{
		display: flex;
		align-items:center;
	}
	.wrapper .headerbox .left{
		display: flex;
		align-items:center;
	}
	.wrapper .headerbox .left .user{
		margin-left: 20rpx;
	}
	.wrapper .headerbox .left image{
		width: 124rpx;
		height: 124rpx;
	}
	.wrapper .headerbox .left .sex{
		width: 28rpx;
		height: 28rpx;
		vertical-align: middle;
	}
	.wrapper .headerbox .left .name{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:500;
		line-height:40rpx;
		color:rgba(255,255,255,1);
	}
	.wrapper .headerbox .left .name text{
		margin-right:16rpx;
	}
	.wrapper .headerbox .left .code{
		font-size:20rpx;
		font-family:PingFang SC;
		font-weight:400;
		line-height:28rpx;
		color:rgba(255,255,255,1);
		opacity:0.8;
		margin-top: 8rpx;
	}
	.wrapper .headerbox .vipcode{
		flex: 1;
	}
	.wrapper .headerbox .vipcode .code{
		float: right;
		background: white;
		border-radius:30rpx;
		/* width:160rpx; */
		padding: 0 32rpx;
		height:60rpx;
	}
	.wrapper .headerbox .vipcode .code image{
		width: 28rpx;
		height: 28rpx;
		vertical-align: middle;
	}
	.wrapper .headerbox .vipcode .code view{
		display: inline-block;
		font-size:20rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:#0D6866;
		vertical-align: middle;
	}
	/* 拾玖会员卡 */
	.wrapper .vipbox{margin-top: 20rpx;position: relative;height: 170rpx;}
	.wrapper .vipbox image{
		height: 170rpx;
		width: 680rpx;
		z-index: -1;
		position: absolute;
	}
	.wrapper .vipbox .viptitle{
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:600;
		color:rgba(13,104,102,1);
		padding: 26rpx 0 0 40rpx;
	}
	.wrapper .vipbox .dredge{
		background: #0D6866;
		border-radius:20rpx;
		width:156rpx;
		height:40rpx;
		position: absolute;
		right: 0;
		bottom: 18rpx;
		right: 22rpx;
	}
	.wrapper .vipbox .dredge .text{
		font-size:20rpx;
		font-family:PingFang SC;
		font-weight:500;
		line-height:40rpx;
		color:rgba(255,255,255,1);
		padding-left: 20rpx;
	}
	 .listbox{
		background: white;
		border-radius:40rpx 0rpx 0rpx 40rpx;
		padding: 0rpx 32rpx 12rpx 32rpx;
		margin-left: 40rpx;
	}
	 .listbox image{
		width: 34rpx;
		height: 34rpx;
		vertical-align: middle;
	}
	 .listbox .collect{
		font-size:24rpx;
		color:rgba(53,53,53,1);
		opacity:0.8;
		display: inline-block;
		margin-left: 8rpx;
	}
	 .list{
		height: 74rpx;
		display: flex;
		align-items: center;
	}
	 .list .left{
		flex: 1;
	}
	 .listborder{
		border: 1rpx solid rgba(242,242,242,1);
		width: 85%;
		position: absolute;
		right: 0;
	}
	.listbox2{
		margin-top: 32rpx;
	}
	.list button{
		width: 100%;
		height: 54rpx;
		background: white;
		text-align: left;
		padding: 0;
		line-height: 50rpx;
		overflow: hidden;
	}
	.user button{
		width: 100%;
		height: 54rpx;
		text-align: left;
		padding: 0;
		line-height: 50rpx;
		overflow: hidden;
		font-size:30rpx;
		background: #0D6866;
		color: white;
	}
	button::after{
	border:none;
	}
	input{
	outline:none;
	border:none;
	list-style: none;
	}
</style>
